<template>
  <div id="app">
    <el-container>
      <el-header>
        <div class="inner">
          <span class="header">美妆产品后台管理系统 
            <span @click="click" style="cursor:pointer;position: absolute; right: 20px;font-size: 13px;">{{allScreen}}</span>
          </span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-menu
              :default-active="default_active"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="pink"
              text-color="#333"
              active-text-color="#fff"
              active-
              router
            >
              <el-menu-item index="/admin/index">
                <i class="el-icon-s-platform"></i>
                <span slot="title">首页</span>
              </el-menu-item>
              <el-menu-item index="/admin/dashboard">
                <i class="el-icon-platform-eleme"></i>
                <span slot="title">控制台</span>
              </el-menu-item>
              <el-menu-item index="/admin/users">
                <i class="el-icon-user-solid"></i>
                <span slot="title">用户管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/goods">
                <i class="el-icon-alarm-clock"></i>
                <span slot="title">商品管理</span>
              </el-menu-item>
              <div class="login">
                <el-avatar  :src="circleUrl" style="width: 25px;height: 25px;display: block;float: left;margin-top: 7px;"></el-avatar>
                <span style="display:block;float: left;margin-left: 3px;">{{ username }}</span>
              </div>
              <div class="exit">
                <span @click="exit">退出登录</span>
              </div>
            </el-menu>
          </el-col>
        </el-row>
      </el-header>

      <el-main>
        <!-- <transition
          name="custom-classes-transition"
          enter-active-class="animate__animated animate__fadeIn"
          leave-active-class="animate__animated animate__fadeOut"
        > -->
        <transition
          name="custom-classes-transition"
          enter-active-class="animated fadeIn"
          leave-active-class="animated fadeOut"
        >
          <!-- 子路由渲染容器 -->
          <router-view></router-view>
        </transition>
        
        <!-- <h1>欢迎来到小刘的购物世界,有兴趣听我唱一首吗？</h1> -->
      </el-main>
      <!-- <el-footer>Footer</el-footer> -->
    </el-container>
  </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
  name:'Screenfull',
  data() {
    return {
      username: localStorage.getItem('username'),
      // 根据切换到的路由路径 选中对应的菜单高亮
      default_active: this.$route.fullPath,
      // default_active:window.location.pathname,
      isCollapse: true,
      circleUrl: "https://tupian.qqw21.com/article/UploadPic/2020-4/20204272059640087.jpg",
      sizeList: [ "small"],
      isFullscreen:false,
      allScreen:'全屏'
    }
  },
  mounted(){
    this.init()
  },
  beforeDestroy(){
    this.destroy()
  },
  updated(){
    this.default_active = this.$route.fullPath
  },
  // 父级路由组件的beforeCreate生命周期拦截
  // beforeCreate() {
  //   if (!localStorage.getItem('token')) {
  //     this.$tip('请先登录', 'error')
  //     this.$router.replace('/login')
  //   }else{
  //     this.$http.get('http://localhost:5000/api/v1/profile').then((res) => {
  //       if(res.data.code === 401){
  //         this.$tip('请先登录','error')
  //         this.$router.replace('/login')
  //       }else{
  //         localStorage.setItem('userInfo',JSON.stringify(res.data.data))
  //       }
  //     })
  //   }
  // },
  methods: {
    // 退出登录
    exit() {
      localStorage.removeItem('token')
      localStorage.removeItem('username')
      this.$router.replace('/login')
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    click(){
      // 是否支持全屏显示
      if(!screenfull.isEnabled){
        this.$message({message:'你的浏览器不支持全屏',type:'warning'})
        return false
      }
      screenfull.toggle()
    },
    change(){
      // 是否 充满屏幕
      this.isFullscreen = screenfull.isFullscreen
      this.allScreen = this.isFullscreen ? '缩小' : '全屏'
    },
    init(){
      if(screenfull.isEnabled){
        screenfull.on('change',this.change)
      }
    },
    destroy(){
      if(screenfull.isEnabled){
        screenfull.off('change',this.change)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  height: 100%;
}
img{
  width: 25px;
}
.inner {
  height: 50px;
  line-height: 50px;
  background-color: #d9a7c7;
}
.header {
  font-size: 24px;
  font-weight: bold;
  margin-left: 50px;
  display: block;
  line-height: 50px;
  color: #fff;
}
.el-header {
  color: #333;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
// .el-footer {
//   background-color: #b3c0d1;
//   color: #333;
//   text-align: center;
//   position: absolute;
//   bottom: 0;
//   left: 0;
//   right: 0;
//   width: 100%;
// }
.el-main {
  background-color: #e9eef3;
  color: #333;
  // text-align: center;
  position: absolute;
  top: 90px;
  left: 0;
  bottom: 0px;
  width: 100%;
}
.el-menu-item {
  width: 120px;
  float: left;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  font-size: 12px;
}
.is-active {
  background-color: #f491b4 !important;
}

.login {
  position: absolute;
  right: 120px;
  line-height: 40px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  overflow: hidden;
}
.exit {
  position: absolute;
  right: 40px;
  line-height: 40px;
  font-size: 12px;
  color: #b3c0d1;
  font-weight: bold;
  cursor: pointer;
}
</style>
